<template>
  <div>
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="手机号">
          <el-input v-model="searchForm.mobile" maxlength="11" placeholder="请输入手机号" clearable @input="val => changeNumberInput(val)" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="searchForm.cert_name" placeholder="请输入真实姓名" clearable />
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input v-model="searchForm.nick_name" placeholder="请输入身份证号码" clearable />
        </el-form-item>
        <el-form-item label="注册时间">
          <my-date-picker ref="myDatePicker" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider />
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
      </h5>
      <el-button size="mini" type="success" @click="handleAddRisk()">添加查询</el-button>
    </div>
    <el-table :data="tableData" border>
      <el-table-column align="center" prop="order_id" width="100" label="ID" />
      <el-table-column align="center" prop="mobile" label="手机号" width="300">
        <template slot-scope="scope">
          {{ encryptPhoneNumber(scope.row.mobile) }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="cert_name" label="姓名" width="300" />
      <el-table-column align="center" prop="cert_no" label="身份证号码" width="450" />
      <el-table-column align="center" prop="" label="风控信息">
        <template slot-scope="scope">
          <!--  -->
          <!-- <el-button type="text" @click="handleRiks1(scope.row)">风控1</el-button><el-button type="text">风控2</el-button> -->
          <el-button size="mini" class="border-btn" style="padding: 0 1px;" @click="handleOrderData(scope.row)">布尔大数据</el-button>
          <el-button size="mini" class="border-btn" style="padding: 0 1px;" @click="publicDialog(scope.row)">雷达大数据</el-button>
          <el-button size="mini" class="border-btn" style="padding: 0 1px;" @click="selectCredit(scope.row)">{{ isSuccess == 1 ? '已查询征信风控报告' : isSuccess == 2 ? '该用户征信查询失败' : isSuccess == 3 ? '查询征信申请中' : '查看征信风控报告' }}</el-button>
          <el-button @click="handleEconomy(scope.row)" size="mini" class="border-btn" style="padding: 0 5px;">经济能力</el-button>
          <el-button @click="handleRisk(scope.row)" size="mini" class="border-btn" style="padding: 0 5px;">风险前筛</el-button>
          <el-button @click="handleAntCredit(scope.row)" size="mini" class="border-btn" style="padding: 0 5px;">信贷洞察</el-button>
          <el-button @click="handleAntFraud(scope.row)" size="mini" class="border-btn" style="padding: 0 5px;">反欺诈价值</el-button>
        </template>
      </el-table-column>
    </el-table>
    <add-risk ref="addRisk" @getList="getList"></add-risk>
    <custom-page ref="customPage" :total="total" :page-size="pageSize" @getList="getList" />
    <new-select-risk ref="newSelectRisk" :order-id="newOrderId" @setIsSuccess="setIsSuccess"></new-select-risk>
    <select-risk ref="selectRisk" :edit-item="editItem" @getList="getList" />
    <public-dialog ref="publicDialog" :edit-item="editItem" @getList="getList" @resp-code="respCode" />
    <ant-economy-dialog ref="antEconomyDialog" :edit-item="editItem" @getList="getList" />
    <ant-limit-dialog ref="antLimitDialog" :edit-item="editItem" @getList="getList" />
    <ant-fraud-dialog ref="antFraudDialog" :edit-item="editItem" @getList="getList" />
    <ant-credit-dialog ref="antCreditDialog" :edit-item="editItem" @getList="getList" />
    <ant-risk-dialog ref="antRiskDialog" :edit-item="editItem" @getList="getList" />
    <div>
      <el-dialog width="500px" title="提示" :visible.sync="orderDialogVisible">
      <el-form ref="ruleFormOrder" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="">
          <!-- <p>首次查看大数据会使风控余量减1次，后续不扣余量并且可"在营销->布尔数据"内查看，是否确认查看大数据?</p> -->
        </el-form-item>
        <el-form-item label="请选择分类" prop="goods_type">
          <el-select v-model="form.goodsType" placeholder="全部" clearable @change="handleChange">
            <el-option v-for="item in goodsType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="orderDialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
    </div>
    
  </div>
</template>

<script>
import myDatePicker from '@/components/myDatePicker'
import customPage from '@/components/customPage'
import addRisk from './components/addRisk'
import newSelectRisk from '@/views/order/dialogs/newSelectRisk'
import selectRisk from '@/views/order/dialogs/selectRisk'
import publicDialog from '@/views/order/dialogs/publicDialog'
import antEconomyDialog from '@/views/order/dialogs/antEconomyDialog'
import antLimitDialog from '@/views/order/dialogs/antLimitDialog'
import antFraudDialog from '@/views/order/dialogs/antFraudDialog'
import antCreditDialog from '@/views/order/dialogs/antCreditDialog'
import antRiskDialog from '@/views/order/dialogs/antRiskDialog'
import { getAntRiskList,delBlack } from '@/api/data'
import { getFirstCreditNewData } from '@/api/order'
export default {
  components: { myDatePicker, customPage,addRisk,newSelectRisk,publicDialog,selectRisk,
    antEconomyDialog,
    antLimitDialog,
    antFraudDialog,
    antCreditDialog,
    antRiskDialog 
  },
  data() {
    return {
      searchForm: {
        mobile: '',
        cert_name: '',
        cert_no: '',
        create_time: ''
      },
      selectedId:'',
      tableData: [],
      total: 0,
			pageSize: 50,
      editItem:{},
      newOrderId:'',
      orderDialogVisible:false,
      form: {
        goodsType: ''
      },
      goodsType: [
        {
          label: '其他',
          value: 0
        },
        {
          label: '游戏电玩',
          value: 1
        },
        {
          label: '娱乐影音',
          value: 2
        },
        {
          label: '电脑平板',
          value: 3
        },
        {
          label: '手机优选',
          value: 4
        }
      ],
      typeId:''
    }
  },
  mounted() {
    this.form.goodsType = this.goodsType[4].label
    this.typeId = this.goodsType[4].value
    this.getList()
  },
  methods: {
    // 布尔大数据
    handleOrderData(item) {
      this.dataItem = item
      this.orderDialogVisible = true
    },
    handleSubmit() {
      console.log(111);
      this.$refs['ruleFormOrder'].validate((valid) => {
        if (valid) {
          this.editItem = {
            orderId: this.dataItem.order_id,
            cert_name: this.dataItem.cert_name,
            cert_no: this.dataItem.cert_no,
            mobile: this.dataItem.mobile,
            goods_type: this.typeId
          }
          this.orderDialogVisible = false
          this.$refs.selectRisk.dialogVisible = true
        } else {
          this.$message({
            message: '请选择类型',
            type: 'error'
          })
          return false
        }
      })
    },
    handleChange(value) {
      this.typeId = value
    },
    // 风险筛前
    handleRisk(item){
      this.editItem={
        cert_no:item.cert_no,
        mobile:item.mobile,
        order_id:item.order_id,
        cert_name:item.cert_name,
      }
      this.$refs.antRiskDialog.dialogVisible = true
    },
    // 信贷洞察  
    handleAntCredit(item){
      this.editItem={
        cert_no:item.cert_no,
        mobile:item.mobile,
        order_id:item.order_id,
        cert_name:item.cert_name,
      }
      this.$refs.antCreditDialog.dialogVisible = true
    },
    // 查询反欺诈
    handleAntFraud(item){
      this.editItem={
        cert_no:item.cert_no,
        mobile:item.mobile,
        order_id:item.order_id,
        cert_name:item.cert_name,
      }
      this.$refs.antFraudDialog.dialogVisible = true
    },
    // 查询经济能力
    handleEconomy(item){
      console.log(item);
      this.editItem={
        cert_no:item.cert_no,
        mobile:item.mobile,
        order_id:item.order_id,
        cert_name:item.cert_name,
      }
      console.log(this.editItem);
      this.$refs.antEconomyDialog.dialogVisible = true
    },
    // 查看征信
    selectCredit(item) {
      getFirstCreditNewData({ orderId: item.order_id }).then(res => { })
      setTimeout(() => {
        this.$confirm('是否确认查看征信?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          this.newOrderId = item.order_id
          this.$refs.newSelectRisk.dialogVisible = true
        }).catch(() => { })
      }, 500);
    },
    // 测试页面  全景雷达以及探针
    publicDialog(item) {
      this.$confirm('是否确认查看风控数据2?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.editItem = {
            orderId: item.order_id,
            cert_name: item.cert_name,
            cert_no: item.cert_no,
            mobile: item.mobile
          }
          this.$refs.publicDialog.dialogVisible = true
          // this.getList()
          this.respCode()
        })
        .catch(() => { })
    },
    respCode(data) {
      if (data.length === 0) {
        this.$message({
          message: "该用户没有雷达风控数据风险",
          type: "error"
        })
      }
    },
    // 风控1
    handleRiks1(row){
      this.editItem=row
    },
    handleAddRisk(){
      this.$refs.addRisk.dialogVisible = true
    },
    encryptPhoneNumber(phone) {
      const reg = /(\d{3})\d{4}(\d{4})/
      return String(phone).replace(reg, "$1****$2")
    },
    // 查询
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal !== 'error') {
        this.searchForm.create_time = pickerVal
        this.$refs.customPage.page = 1
        this.$refs.customPage.pageSize = 50
        this.getList()
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset()
      }
      this.searchForm = {
        mobile: '',
        cert_name: '',
        cert_no: '',
        create_time: ''
      }
      this.getList()
    },
    getList() {
      const { page, pageSize } = this.$refs.customPage
      getAntRiskList({
        page,
        pageSize,
        ...this.searchForm
      }).then(res => {
        console.log(res);
        const { data, total } = res
        this.tableData = data || []
        this.total = total || 0
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.status_icon::before {
  display: inline-block;
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ff4146;
  margin-right: 6px;
}

.status_icon.success::before {
  background-color: #4ccb86;
}

.border-btn {
  height: 25px;
  padding-top: 0;
  padding-bottom: 0;
  background: #ffffff;
  border: 1px solid $mainBlue;
  border-radius: 3px;
  color: $mainBlue;
  font-size: 12px;
}
</style>
